import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	Route,
	withRouter,
} from 'react-router-dom';
import {
	Flex,
	WingBlank,
	Tools,
	Icon,
} from 'weaver-mobile';
import Balance from "./Balance.js";
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Leave extends Component {
	handleClick = (item) => {
		const {
			store,
			history,
		} = this.props, {
			leaveWorkflowLayout,
			loadLeaveWorkflowInfo,
			setKqType,
		} = store;

		setKqType(item.type);
		history.push(leaveWorkflowLayout.path)
		loadLeaveWorkflowInfo();
	}

	render() {
		const {
			store,
			history,
		} = this.props, {
			leaveInfo,
			balanceLayout,
			changeTitle,
			resourceName,
		} = store;

		return (
			<WingBlank>
				<div className="attendance-leave">
					<div className="attendance-leave-header">
						<div className="attendance-columns-title leave-title">{getLabel(503887,"请假信息")}</div>
						<div className='attendance-entry'>
							<span className="attendance-entry-label" onClick={() => {
								let title;
								if (!resourceName) {
									title = getLabel(513217,"假期余额");
								}else{
									title = getLabel(513297,"{params}的假期余额").replace("{params}",resourceName);
								}

								changeTitle(title);
								history.push(balanceLayout.path)
							}}>{getLabel(513217,"假期余额")}</span>
						</div>
					</div>
					{
						(leaveInfo.length === 0) && (
							<div className="attendance-leave-none">
								<Icon type="no-contents" size="md"/>
								<span>{getLabel(503888,"暂无请假信息")}</span>
							</div>
						)
					}
					<div className="attendance-leave-content">
						{
							leaveInfo.map(item => {
								const {title, value, type} = item;

								return (
									<div key={type} className={`attendance-leave-brief ${leaveInfo.length < 3 ? 'flexGrow' : ''}`} onClick={() =>this.handleClick(item)}>
										<div>{value}</div>
										<div>{title}</div>
									</div>
								)
							})
						}
					</div>
				</div>
				<Route key={balanceLayout.id} path={balanceLayout.path} render={() => <Balance store={store}/>}/>
			</WingBlank>
		);
	}
}